<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
<!--  <link href='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css' rel='stylesheet' />-->
  <style>
    html,
    body,
    #map {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
  </style>
</head>
<body>
<div id="map"></div>
<!--<script src='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js'></script>-->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
    var style = {
        "version": 8,
        "name": "lzugis",
        "sources": {
            "XYZTile": {
                "type": "raster",
                "tiles": ['http://localhost:8089/{z}/{x}/{y}.png'],
                "tileSize": 256
            }
        },
        "layers": [{
            "id": "XYZTile",
            "type": "raster",
            "source": "XYZTile",
            "minzoom": 0,
            "maxzoom": 8
        }]
    }

    // window.map = new mapboxgl.Map({
    //     container: 'map',
    //     style: style,
    //     center: [103.081163, 37.1612],
    //     zoom: 3.45,
    //     minZoom: 2,
    //     maxZoom: 8
    // });

    const data = {
        "id": "1234",
        "lat": 40,
        "lon": 110,
        "name": "测试"
    };
    const baseUrl = 'http://localhost:18080';
    $.ajax({
        type: 'POST',
        url: baseUrl + '/capital/insert' ,
        data: JSON.stringify(data),
        // contentType: 'application/x-www-form-urlencoded; charset=UTF-8',// form-data
        contentType: 'application/json;charset=utf-8', // request payload
        success: function (r) {
            $.get(baseUrl + '/capital/query', res => {
                console.log(res);
            })
        }
    });
</script>
</body>
</html>